<template>
  <div class="role">
    <PageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></PageSearch>
    <PageContent
      :content-config="contentConfig"
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    ></PageContent>
    <PageModal :modal-config="modalConfig" ref="modalRef"></PageModal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from "@/components/PageSearch/PageSearch.vue";
import searchConfig from "./config/search.config";

import PageContent from "@/components/PageContent/PageContent.vue";
import contentConfig from "./config/content.config";

import PageModal from "@/components/PageModal/PageModal.vue";
import modalConfig from "./config/modal.config";

import usePageContent from "@/hoooks/usePageContent";
import usePageModal from "@/hoooks/usePageModal";

const { contentRef, handleQueryClick, handleResetClick } = usePageContent();
const { modalRef, handleNewClick, handleEditClick } = usePageModal();
</script>
<style lang="less" scoped></style>
